<template>
	<view class="container">
		<view class="top-box">
			<view class="slider-box">
				<swiper class="swiper" :autoplay="true" :interval="2000" @change="swiperChange">
					<swiper-item v-for="item in swiperList" :key="item.id">
						<image :src="item.url" class="swiper-item"></image>
					</swiper-item>
				</swiper>
				<view class="indicator-box">
					<view class="indicator-item-box" v-for="(item,index) in swiperList" :key="item.id">
						<view class="indicator-item" :class="{'indicator-item-active': swiperIndex == index}"></view>
					</view>
				</view>
			</view>
			<view class="nav-box">
				<view class="nav-item" @tap="tapNavItem" data-index="1">
					<view class="nav-icon">
						<image src="../../static/images/zdx.png"></image>
					</view>
					<view class="nav-label">找大学</view>
				</view>
				<view class="nav-item" @tap="tapNavItem" data-index="2">
					<view class="nav-icon">
						<image src="../../static/images/czy.png"></image>
					</view>
					<view class="nav-label">查专业</view>
				</view>
				<view class="nav-item" @tap="tapNavItem" data-index="3">
					<view class="nav-icon">
						<image src="../../static/images/lqsj.png"></image>
					</view>
					<view class="nav-label">录取数据</view>
				</view>
				<view class="nav-item" @tap="tapNavItem" data-index="4">
					<view class="nav-icon">
						<image src="../../static/images/wccx.png"></image>
					</view>
					<view class="nav-label">位次查询</view>
				</view>
			</view>
		</view>
		<view class="hot-box">
			<view class="hot-title">热门院校</view>
			<view class="hot-list-box">
				<view class="hot-list-item" v-for="item in dataList" :key="item.id" @tap="goDetail(item.id)">
					<view class="item-logo">
						<image :src="item.logo"></image>
					</view>
					<view class="item-region">{{item.area}}</view>
					<view class="item-name">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperIndex: 0,
				swiperList: [
					{id: 1, url: 'https://test-1300796766.cos.ap-guangzhou.myqcloud.com/14.jpg'},
					{id: 2, url: 'https://test-1300796766.cos.ap-guangzhou.myqcloud.com/15.jpg'},
					{id: 3, url: 'https://test-1300796766.cos.ap-guangzhou.myqcloud.com/16.jpg'},
				],
				dataList: [
					{id: 1, name: '河南工业大学', area: '河南省 南阳市', logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600781735551&di=980adc155000d8d45c46df32cd3a8133&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fbaike%2Fw%3D268%2Fsign%3D94805585ff039245a1b5e609bf95a4a8%2Fd01373f082025aaff341dd83f8edab64034f1a02.jpg'},
					{id: 2, name: '河南工程学院', area: '河南省 郑州市', logo: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2568411762,1112525948&fm=26&gp=0.jpg'},
					{id: 3, name: '河南医科大学', area: '河南省 信阳市', logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600780919014&di=91a610c80ea0c0c98ef8f844fd25c59c&imgtype=0&src=http%3A%2F%2Fpic3.16pic.com%2F00%2F52%2F74%2F16pic_5274917_b.jpg'},
					{id: 4, name: '郑州大学', area: '河南省 许昌市', logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600780947899&di=fdf0485a92f6b0496a4888d135c89920&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F53%2F44%2F01300053933016132022447840350_s.jpg'},
					{id: 5, name: '郑州大学', area: '河南省 许昌市', logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600780947899&di=fdf0485a92f6b0496a4888d135c89920&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F53%2F44%2F01300053933016132022447840350_s.jpg'},
					{id: 6, name: '郑州大学', area: '河南省 许昌市', logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600780947899&di=fdf0485a92f6b0496a4888d135c89920&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F53%2F44%2F01300053933016132022447840350_s.jpg'},
					{id: 7, name: '郑州大学', area: '河南省 许昌市', logo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600780947899&di=fdf0485a92f6b0496a4888d135c89920&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F53%2F44%2F01300053933016132022447840350_s.jpg'},
				]
			}
		},
		
		methods: {
			
			swiperChange(e) {
				this.swiperIndex = e.detail.current
			},
			
			tapNavItem(e) {
				let index = e.currentTarget.dataset.index
				switch (index) {
					case '1':
						uni.navigateTo({
							url: '/pages/search_university/search_university'
						})
						break
					case '2':
						uni.navigateTo({
							url: '/pages/major_list/major_list'
						})
						break
					case '3':
						uni.navigateTo({
							url: '/pages/admission_data/search_university'
						})
						break
					case '4':
						uni.navigateTo({
							url: '/pages/search_rank/search_rank'
						})
						break
					default:
						break
				}
			},
			
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/university_detail/university_detail?id=' + id
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
		color: #333333;
	}
	
	.container {
		width: 750rpx;
		height: auto;
	}
	
	.top-box {
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;
	}
	
	.slider-box {
		width: 700rpx;
		height: 250rpx;
		border-radius: 30rpx;
		overflow: hidden;
		margin-top: 20rpx;
		position: relative;
	}
	
	.swiper-item {
		width: 700rpx;
		height: 250rpx;
		border-radius: 30rpx;
	}
	
	.indicator-box {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 10rpx;
		z-index: 10000;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.indicator-item-box {
		width: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.indicator-item {
		width: 12rpx;
		height: 12rpx;
		border-radius: 6rpx;
		background-color: #ffffff;
	}
	
	.indicator-item-active {
		background-color: #22e484 !important;
	}
	
	.nav-box {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin-top: 40rpx;
	}
	
	.nav-item {
		width: 122rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.nav-icon {
		width: 60rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
	}
	
	.nav-icon image {
		width: 60rpx;
		height: 60rpx;
	}
	
	.nav-label {
		font-size: 22rpx;
		margin-top: 10rpx;
	}
	
	.hot-box {
		width: 750rpx;
		background-color: #ffffff;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.hot-title {
		width: 700rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.hot-list-box {
		width: 700rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}
	
	.hot-list-item {
		width: 158rpx;
		height: 242rpx;
		border: solid 2rpx #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 12rpx;
		margin-top: 20rpx;
	}
	
	.item-logo {
		margin-top: 20rpx;
	}
	
	.item-logo image {
		width: 96rpx;
		height: 96rpx;
	}
	
	.item-region {
		font-size: 20rpx;
		color: #666666;
		margin-top: 14rpx;
	}
	
	.item-name {
		width: 146rpx;
		font-size: 24rpx;
		margin-top: 10rpx;
		text-align: center;
	}
</style>
